<script setup lang="ts">
import type { SourceTrackVO } from '#/api/register/track/model';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { DictEnum } from '@vben/constants';

import { CopyOutlined } from '@ant-design/icons-vue';
// import { VbenIcon } from '@vben/icons';
import { useClipboard } from '@vueuse/core';
import {
  Descriptions,
  DescriptionsItem,
  message,
  Skeleton,
} from 'ant-design-vue';

import { sourceTrackInfo } from '#/api/register/track';
import { renderDict } from '#/utils/render';

const info = ref<SourceTrackVO>();
const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    const record = modalApi.getData() as SourceTrackVO;
    if (record && record.id) {
      info.value = await sourceTrackInfo(record.id);
    }
  },
  onClosed() {
    info.value = undefined;
  },
});

const { copy } = useClipboard({ legacy: true });

async function handleCopy(text: string) {
  await copy(text);
  message.success('复制成功');
}
</script>

<template>
  <BasicModal
    :footer="false"
    :fullscreen-button="false"
    class="w-[600px]"
    title="详情"
  >
    <Descriptions v-if="info" size="small" :column="1" bordered>
      <DescriptionsItem label="来源分类" :label-style="{ minWidth: '120px' }">
        <component
          :is="renderDict(info.typeId, DictEnum.REGISTER_SOURCE_TRACK_TYPE)"
        />
      </DescriptionsItem>
      <DescriptionsItem label="追踪链接">
        {{ info.newUrl }}
        <span>
          <CopyOutlined
            class="cursor-pointer"
            title="复制"
            @click="handleCopy(info.newUrl)"
          />
        </span>
      </DescriptionsItem>
      <DescriptionsItem label="链接类型">
        <component
          :is="
            renderDict(info.urlType, DictEnum.REGISTER_SOURCE_TRACK_URL_TYPE)
          "
        />
      </DescriptionsItem>
      <DescriptionsItem v-if="info.urlType === 2" label="APPID">
        <component
          :is="renderDict(info.appId, DictEnum.WECHAT_MINIPROGRAM_LIST)"
        />
      </DescriptionsItem>
      <DescriptionsItem label="来源名称">
        {{ info.sourceName }}
      </DescriptionsItem>
      <DescriptionsItem label="来源KEY">
        {{ info.sourceKey }}
      </DescriptionsItem>
      <DescriptionsItem label="届数">
        {{ info.number }}
      </DescriptionsItem>
      <DescriptionsItem label="备注">
        {{ info.remark }}
      </DescriptionsItem>
    </Descriptions>
    <Skeleton v-if="!info" active />
  </BasicModal>
</template>
